<template>
  <div class="chart-container">
    <h2>商品订单数据</h2>
    <div ref="chartRef" class="chart-wrapper"></div>
    <div v-if="error" class="text-red-500">{{ error }}</div>
  </div>
</template>

<script setup>
import {selectLast10DaysOrderCount} from "@/api/orders/order"
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';

const chartRef = ref(null);
let chart = null;
const error = ref(null);

const initChart = (xData = [], yData = []) => {
  if (!chartRef.value || !Array.isArray(xData) || !Array.isArray(yData)) {
    error.value = '初始化图表失败：数据不合法或容器不存在';
    return;
  }
  chart?.dispose();
  chart = echarts.init(chartRef.value);

  chart.setOption({
    title: {
      text: '近10天订单数统计',
      left: 'center',
      textStyle: { color: '#333', fontSize: 18 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#eee',
      borderWidth: 1,
      textStyle: { color: '#666' },
      formatter: (params) => `<div style="font-weight: bold;">${params[0].name}</div><div>订单数: ${params[0].value}</div>`
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      data: xData,
      axisLine: { lineStyle: { color: '#ccc' } },
      axisTick: { show: false },
      axisLabel: { color: '#666', fontSize: 12, interval: 0 }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: '#666', fontSize: 12 },
      splitLine: { lineStyle: { color: '#eee' } }
    },
    series: [{
      name: '订单数',
      type: 'line',
      data: yData,
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      showSymbol: false,
      hoverAnimation: true,
      lineStyle: { color: '#1890ff', width: 3, opacity: 0.8 },
      itemStyle: { color: '#1890ff', borderWidth: 2, borderColor: '#fff' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: 'rgba(24, 144, 255, 0.3)' }, { offset: 1, color: 'rgba(24, 144, 255, 0)' }]
        }
      }
    }]
  });
};

const fetchData = () => {
  selectLast10DaysOrderCount()
      .then(response => {
        const res = response;
        if (!Array.isArray(res.data)) throw new Error('数据格式错误');
        const xData = res.data.map(item => item.date);
        const yData = res.data.map(item => item.total);
        initChart(xData, yData);
      })
      .catch(err => {
        error.value = `数据拉取失败：${err.message}`;
        console.error(err);
      });
};

onMounted(() => {
  fetchData();
  window.addEventListener('resize', () => chart?.resize());
});

onBeforeUnmount(() => {
  chart?.dispose();
  window.removeEventListener('resize', () => chart?.resize());
});
</script>

<style scoped>
.chart-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin: 20px;
}

.chart-wrapper {
  width: 100%;
  height: 400px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.text-red-500 {
  color: #ef4444;
  margin-top: 10px;
}
</style>